<template>
  <div class="chart-dialog">
    <div class="chart-bg">
      <div class="title-box">
        <div class="title-content">
          <span class="title">{{ titleName }}</span>
        </div>

        <div class="close-btn" @click="onClickCloseBtn">
          <img src="@/assets/img/close.png" alt="关闭" />
        </div>
      </div>
      <div class="content-box">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    titleName: {
      type: String,
      default: ''
    }
  },

  mounted() {},
  methods: {
    onClickCloseBtn() {
      this.$emit('closeChartDialog')
    }
  }
}
</script>

<style lang="scss" scoped>
.chart-dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  // background: rgba(0, 0, 0, 0.5);
  z-index: 999;

  .chart-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20%;
    height: 25%;
    background: url('@/assets/img/dialogBg.png') no-repeat center;
    background-size: 100% 100%;

    .title-box {
      position: absolute;
      left: 3%;
      top: 2%;
      width: calc(100% - 6%);
      height: 30px;
      // border: 1px solid red;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .title-content {
        display: flex;
        align-items: center;

        .title {
          font-family: Source Han Sans CN;
          color: #fff;
          font-size: 25px;
          margin-right: 10px;
        }
      }

      .close-btn {
        width: 24px;
        cursor: pointer;

        img {
          display: block;
          width: 100%;
        }
      }
    }

    .content-box {
      position: absolute;
      left: 3%;
      top: calc(2.4% + 30px);
      width: calc(100% - 6%);
      height: 30vh;
      // border: 1px solid aqua;
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 1.7vh;
      color: #ffffff;
    }
  }
}
</style>
